<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body {
            position: relative;
            height: 100%;
            width: 100%;
        }
        /* div{
            display: flex;
            width: calc(100vw - 20px);
            height: calc(50vw - 10px);
            margin-left: 10px;
            margin-right: 10px;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            background: pink;
        } */
        div{
            position: absolute;
            left: 10px;
            right: 10px;
            padding-bottom: 50%;
            background: pink;
        }
        div p {
            position: absolute;
            height: 50%;
            left: 50%;
            top: 50%;
            transform: translateY(-50%);
            font-size: 20px;
            background: purple;
        }
    </style>
</head>
<body>
    <div>
        <p>A</p>
    </div>
    <script>
        // function Foo(){
        //     getName = function(){
        //         console.log(1);
        //     }
        //     // this.getName = function(){
        //     //     console.log(1);
        //     // }
        //     return this;
        // }
        // Foo.getName = function(){
        //     console.log(2)
        // }
        // Foo.prototype.getName = function(){
        //     console.log(3)
        // }
        // var getName = function(){
        //     console.log(4)
        // }
        // function getName(){
        //     console.log(5);
        // }
        // Foo.getName();//2
        // getName();//4
        // Foo().getName();//1
        // getName();//1
        // new (Foo.getName)();//2
        // (new Foo()).getName();//3/1
        // new new Foo().getName()//3
   
        // function a() {
        //     for(var i = 0;i < 5;i++) {
        //         this.i = i;
        //         (function(i){
        //             setTimeout(function(){
        //             console.log(i);
        //         },0)
        //         })(i)
        //         console.log(this.i);
        //     }
        // }
        // a()

        // function repeat(fn,times,wait) {
        //     let timer = null;
        //     return function(str) {
        //         timer = setInterval(() => {
        //             times--;
        //             if(times === 0) {
        //                 clearInterval(timer);
        //             }
        //             fn(str)
        //         }, wait);
        //     }
        // }
        // const repeatFunc = repeat(alert,4,3000);
        // repeatFunc("hello")

        function a () {
            console.log("a");
            Promise.resolve().then(()=>{
                console.log("e");
            })
        }

        function b() {
            console.log('b');
        }
        function c() {
            console.log('c');
        }

        function d() {
            setTimeout(a,0);
            var temp = Promise.resolve().then(b);
            setTimeout(c,0);
            console.log('d');
        }
        d();
        /*
        d
        b
        a
        e
        c
        */
    </script>
</body>
</html>